<template>
    <div style="width: auto; " v-if="show">
        <el-card class="box-card" style="width: 100%; height: 200px; float:left" shadow="hover">
            <div slot="header" class="clearfix">
                <span>{{ShoppingCartIndex+1}}.{{ShoppingCart[ShoppingCartIndex].title}}</span>
                <el-button style="float: right; padding: 3px 0" type="text"><a @click="goAbout(ShoppingCartIndex,data_name)">查看详情</a>
                </el-button>

                <el-button v-if="show" style="float: right; padding: 3px 0; color:#ff0000" type="text"><a
                        @click="delCommodity(ShoppingCartIndex)"

                >删除|</a></el-button>
                <el-button v-else="show" style="float: right; padding: 3px 0; " type="text">已删除|</el-button>
            </div>
            <div class="demo-image" style="width: 100px; height: 100px; float:left">

                <el-image
                        style="width: 100px; height: 100px"
                        :src=url+ShoppingCart[ShoppingCartIndex].photo
                        fit="contain"
                ></el-image>

            </div>

            <span style="color: red ;float:left; ">¥{{ShoppingCart[ShoppingCartIndex].price}}</span>
            <p v-if="ShoppingCart[ShoppingCartIndex].free_shipping==1"
               style="background-color: red ;color: white; float:left; font-size:1px">包邮</p>
<!--            <el-input-number v-model="num" @change="handleChange" :min="1" :max="1000" label="描述文字" ></el-input-number>-->



        </el-card>

    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import ShoppingCart from "../views/ShoppingCart";

    export default {
        data() {
            return {
                show: true,
                url: "",
                num: "",



            }
        },
        name: 'CartCard',
        props: {
            index: Number,
            data_name :String,
            page : Number,
            page_count: Number,
        },
        created() {
            this.url = "http://www.qjhyuki.top/vuehomeword/VueShop/image/"


        },
        methods: {
            delCommodity(ShoppingCartIndex) {

                console.log(ShoppingCartIndex)
                this.$store.commit("delShopping", ShoppingCartIndex)
                this.$notify({
                    title: '删除成功',
                    message: '成功删除商品',
                    type: 'success',
                    duration: 500
                });
                this.change_data(this.index)
            },
            goAbout:function(id,data_name){

                this.$router.push({
                    path:`/about/${id}/${data_name}`
                });

            },
            change_data: function(index){
                this.$emit("part_data_changed",index)
            }


        },
        computed: {
            ...mapState(['ShoppingCart']),
            ShoppingCartIndex(){

                    return (this.page-1)*this.page_count +this.index


            }
        },

    }
</script>